<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript">
    Ext.require(['*']);

    Ext.onReady(function() {
	

	 var bd = Ext.getBody();
	 bd.createChild({tag:'h2',html:'Form 1 - Very Simple'});
      
       var form = Ext.create('Ext.form.Panel',{
					url:'save-form.aspx',
					frame:true,
					title:'SimpleForm',
					bodyStyle:'padding:5px 5px 0',
					width:350,
					fieldDefaults: {
         			   	msgTarget: 'side',
            			labelWidth: 100
        					},

					defaultType: 'textfield',
        				defaults: {
           				anchor: '100%'
        				},

        				items: [{
            				fieldLabel: 'First Name',
            				name: 'first',
            				allowBlank:false
        					},{
            				fieldLabel: 'Last Name',
            				name: 'last'
        					},{
            				fieldLabel: 'Company',
            				name: 'company'
        					}, {
            				fieldLabel: 'Email',
            				name: 'email',
            				vtype:'email'
        					}, {
            				xtype: 'timefield',
            				fieldLabel: 'Time',
            				name: 'time',
            				minValue: '8:00am',
            				maxValue: '6:00pm'
        					}],
					 buttons: [{
            				text: 'Save'
        					},{
            				text: 'Cancel'
        					}]
					});
	form.render(bd);

    });
    </script>
</head>
<body>
   
</body>
</html>
